<!-- src/components/Register.vue -->
<script>
import { check, register } from "@/api/sysDict.js";
import { ElMessageBox } from "element-plus";
import { AxiosError } from "axios";

export default {
  name: "Register",
  data() {
    return {
      register_disabled: false,
      registerForm: {
        accountName: '',
        username: '',
        password: '',
        confirmPassword: '',
        email: '111@qq.com',
        phone: '19078835747'
      },
      rules: {
        accountName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // { min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.validatePasswordConfirm, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入你的电子邮箱', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入你的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validatePasswordConfirm(rule, value, callback) {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致!'));
      } else {
        callback();
      }
    },
    async register() {
      const parms = {
        accountName: this.registerForm.accountName,
        password: this.registerForm.password,
        phone: this.registerForm.phone,
        email: this.registerForm.email,
        username: this.registerForm.username
      };
      // 禁用注册按钮，防止重复提交
      this.register_disabled = true;
      // 验证表单
      this.$refs.registerForm.validate(async (valid) => {
        console.log(parms.accountName);
        console.log(parms.username);
        console.log(parms.password);
        console.log(parms.email);
        console.log(parms.phone);
        if (valid) {
          console.log("验证通过");
          try {
            // 检查用户名是否存在
            console.log("11111111111111111111111111");
            // 传递包含完整用户信息的 parms 对象给 check 方法
            const checkRes = await check(parms);
            console.log("5555555555555555555555");
            console.log("checkRes.data.data:" + checkRes.data);
            if (checkRes.data.data) {
              // 用户已存在，弹出对话框
              await ElMessageBox.alert('该用户已经存在', '提示', {
                confirmButtonText: '确定',
              });
            } else {
              // 用户名不存在，进行注册
              const registerRes = await register(parms);
              if (registerRes.data.code === 200) {
                // 注册成功，提示用户并跳转登录页
                ElMessageBox.alert('注册成功，请登录', '提示', {
                  confirmButtonText: '确定',
                }).then(() => {
                  this.$router.replace('/login');
                });
              } else {
                // 注册失败，弹出对话框显示后端返回信息
                ElMessageBox.alert(registerRes.data.data || '注册失败，请重试', '提示', {
                  confirmButtonText: '确定',
                });
              }
            }
          } catch (error) {
            console.error('注册请求错误:', error);
            // 显示服务器连接异常消息
            await ElMessageBox.alert(AxiosError.config.request.responseText, '提示', {
              confirmButtonText: '确定',
            });
          } finally {
            // 恢复注册按钮状态
            this.register_disabled = false;
          }
        } else {
          // 验证失败，恢复注册按钮状态
          this.register_disabled = false;
          return false;
        }
      });
    }
  }
}
</script>

<template>
  <!-- 保持原有模板代码不变 -->
  <div class="loginBody">
    <div style="width:97%;text-align:center;color:white;padding: 100px 100px 0 0;font-size:22px;">
      <h1>碳中和</h1>
    </div>
    <div class="loginDiv">
      <div class="login-content">
        <h1 class="login-title">用户注册</h1>
        <!-- 主要表单格式 -->
        <el-form :model="registerForm" label-width="100px" :rules="rules" ref="registerForm" style="margin-left: 10px">
          <el-form-item label="用户名" prop="accountName">
            <el-input style="width: 200px" type="text" v-model="registerForm.accountName"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="用户呢称" prop="username">
            <el-input style="width: 200px" type="text" v-model="registerForm.username"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="输入密码" prop="password">
            <el-input style="width: 200px" type="password" v-model="registerForm.password"
                      show-password autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input style="width: 200px" type="password" v-model="registerForm.confirmPassword"
                      show-password autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input style="width: 200px" type="text" v-model="registerForm.phone"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input style="width: 200px" type="text" v-model="registerForm.email"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="register" style="width: 200px" :disabled="register_disabled">注 册</el-button>
          </el-form-item>
          <el-form-item>
            <router-link to="/login" style="margin-left: 120px">已有账号，返回登录</router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 保持原有样式代码不变 */
.loginBody {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../assets/login.png');
  background-size: cover;
  overflow-x: hidden;
}

.loginDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 420px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
  margin: 20px 0;
  text-align: center;
  color: #303133;
}

.login-content {
  padding: 25px;
}
</style>